<template>
  <!-- 导航 -->
  <nav class="ui inverted vertical segment my-padded-tb-mini my-shadow-small" id="Top">
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <div class="weather">
          <div id="weather-v2-plugin-simple"></div>
        </div>
        <img id="Blog" @click="toHome" class="my-cursor-pointer"
             src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/Chenyumeng.png"/>
        <router-link tag="a" to="/home" :class="navClass"><i class="icon home"></i>首页</router-link>
        <router-link tag="a" to="/types" :class="navClass"><i class="icon th"></i>分类</router-link>
        <router-link tag="a" to="/tags" :class="navClass"><i class="icon tags"></i>标签</router-link>
        <router-link tag="a" to="/archives" :class="navClass"><i class="icon calendar alternate"></i>归档</router-link>
        <router-link tag="a" to="/about" :class="navClass"><i class="icon user"></i>关于我</router-link>
        <div :class="navClass + ' right'">
          <el-input placeholder="在这可劲搜吧..." @keyup.enter.native="toSearch" v-model="searchValue">
            <i slot="suffix" @click="toSearch" class="el-icon-search el-input__icon my-cursor-pointer"></i>
          </el-input>
        </div>
      </div>
    </div>
    <a @click="changeNav()" class="ui black icon button my-menu my-right-top my-mobile-show">
      <i class="icon sidebar"></i>
    </a>
  </nav>
</template>

<script>
  export default {
    name: "CommonHeader",
    data() {
      return {
        navClass: 'my-item item my-mobile-hide',
        searchValue: '',
      }
    },
    created() {
      this.$store.dispatch("GetAllUser")
      this.$store.dispatch("GetAllType")
      this.$store.dispatch("GetAllTag")
    },
    methods: {
      changeNav() {
        if (this.navClass === 'my-item item my-mobile-hide') {
          this.navClass = 'right my-item item'
        } else {
          this.navClass = 'my-item item my-mobile-hide'
        }
      },
      toSearch() {
        if (this.searchValue !== '') {
          if ('Search' !== this.$route.name) {
            this.$store.commit("SET_SEARCH_VALUE", this.searchValue)
            this.$router.push({name: 'Search'})
          } else {
            this.$store.commit("SET_SEARCH_VALUE", this.searchValue)
          }
        }
        this.searchValue = ''
      },
      toHome() {
        if (this.$route.name !== 'Home') {
          this.$router.push({name: 'Home'})
        }
      }
    }
  }
</script>

<style scoped>

  .weather {
    position: absolute!important;
    left: 0!important;
    height: 75px!important;
    width: 100px!important;
    z-index: 1!important;
    padding-top: 13px!important;
  }

  @media screen and (max-width: 768px) {
    #Blog {
      width: 225px !important;
      align-self: auto !important;
    }

    .weather {
      display: none;
    }
  }
</style>
